
class ListTemplate extends React.Component {
	render (){
		var wrapper=this.props.wrapper,
			app=wrapper.props.app,
			isPhone=wrapper.state.isPhone,
			router=wrapper.state.router,
			logo=wrapper.state.logo,
			mainTitle=wrapper.state.mainTitle,
			describe=wrapper.state.describe,
			qrCode=wrapper.state.qrCode,
			setting=wrapper.state.setting,
			mixtureMode=wrapper.state.mixtureMode,
			mixtureBackground=wrapper.state.mixtureBackground,
			mixtureColor=wrapper.state.mixtureColor,
			mixtureSpeed=wrapper.state.mixtureSpeed,
			sliderMode=wrapper.state.sliderMode,
			sliderBackground=wrapper.state.sliderBackground,
			sliderColor=wrapper.state.sliderColor,
			sliderSpeed=wrapper.state.sliderSpeed,
			sliderSpeedList=wrapper.sliderSpeedList,
			wallMode=wrapper.state.wallMode,
			wallBackground=wrapper.state.wallBackground,
			wallColor=wrapper.state.wallColor,
			wallSpeed=wrapper.state.wallSpeed,
			wallSpeedList=wrapper.wallSpeedList,
			message=wrapper.state.message,
			actionSheet=wrapper.state.actionSheet,
			confirmOptions=wrapper.state.confirmOptions,
			mainCollection=wrapper.state.mainCollection,
			isShowPcMenu=true,
			status=wrapper.state.status,
			mainHtml='';
		
		switch(router){
			case 'mainList':
				if(!isPhone){
					mainCollection=new CollectionList(_.filter(mainCollection.toJSON(),function(i){ return (i.ratio && i.h)}))
				}else{
					mainCollection=new CollectionList(_.filter(mainCollection.toJSON(),function(i){ return !i.isVideo}))
				}
				
				mainHtml=mainCollection.length || !app.mainCollection.complete || !isPhone?<MainList app={app} isPhone={isPhone} collection={mainCollection} wallMode={wallMode} wallBackground={wallBackground} wallColor={wallColor} isAuditing={false} message={message} />:<MainGuide />;
				break;
			case 'uploadPhoto':
				mainHtml=<UploadPhoto app={app} describe={describe}  qrCode={qrCode} />;
				break;
			case 'adminAuditing':
				var statusCollection=wrapper.state[(status=='approved'?'main':status)+'Collection'];
				statusCollection=new CollectionList(_.filter(statusCollection.toJSON(),function(i){ return !i.isVideo}));
				mainHtml=<MainList app={app} isPhone={isPhone} collection={statusCollection} wallMode={wallMode} wallBackground={wallBackground} wallColor={wallColor} isAuditing={true} message={message} status={status} />;
				break;
			case 'userSetting':
			case 'userSetname':
			case 'checkPhotos':
			case 'adminSetting':
			case 'outlinkList':
				mainHtml=<Setting app={app} isPhone={isPhone} wrapper={wrapper} />;
				break;
			case 'mixturePlayer':
				mainCollection=new CollectionList(_.filter(mainCollection.toJSON(),function(i){ return !i.isVideo}));
				mainHtml=<MixturePlayer app={app} isPhone={isPhone} collection={mainCollection} mixtureMode={mixtureMode} mixtureBackground={mixtureBackground} mixtureColor={mixtureColor} mixtureSpeed={mixtureSpeed} sliderSpeedList={sliderSpeedList} wallSpeedList={wallSpeedList} />;
				isShowPcMenu=false;	
				break;
			case 'sliderPlayer':
				if(sliderMode!='classic-slides'){
					mainCollection=new CollectionList(_.filter(mainCollection.toJSON(),function(i){ return !i.isVideo}));
				}

				mainHtml=<SliderPlayer app={app} collection={mainCollection} sliderMode={sliderMode} sliderBackground={sliderBackground} sliderColor={sliderColor} sliderSpeed={sliderSpeed} sliderSpeedList={sliderSpeedList} hasLogo={true} hasQrcode={true} hasDesc={true} />;
				isShowPcMenu=false;	
				break;
			case 'wallPlayer':
				if(wallMode=='waterfall-with-text' || wallMode=='waterfall-without-text' || wallMode=='waterfall-of-grid'){
					mainCollection=new CollectionList(_.filter(mainCollection.toJSON(),function(i){ return (!i.isVideo && i.ratio && i.h)}));
					mainHtml=<WallPlayer app={app} isPhone={isPhone} collection={mainCollection} wallMode={wallMode} wallBackground={wallBackground} wallColor={wallColor} wallSpeed={wallSpeed} wallSpeedList={wallSpeedList} hasLogo={true} hasQrcode={true} />
				}else{
					mainCollection=new CollectionList(_.filter(mainCollection.toJSON(),function(i){ return !i.isVideo}));
					mainHtml=<GemPlayer app={app} isPhone={isPhone} collection={mainCollection} wallMode={wallMode} wallBackground={wallBackground} wallColor={wallColor} wallSpeed={wallSpeed} wallSpeedList={wallSpeedList} hasLogo={true} />
				}
				isShowPcMenu=false;
				break;
		}

		return (
			<div>
			    {!isPhone && background?<div className="body_background" style={{backgroundImage:'url('+background+')'}}></div>:null}
				{isShowPcMenu?<Menu app={app} router={router} logo={logo} mainTitle={mainTitle} status={status} />:''}
				{mainHtml}
				<ActionSheet app={app} actionSheet={actionSheet} />
				<ConfirmDialog app={app} options={confirmOptions} />
			</div>
		)
	}
};